<template>
  <div>
    <div class="image-container">
      <ImgCutter
          ref="imgCutterModal"
          label="选择图片"
          fileType="png"
          :crossOrigin="true"
          crossOriginHeader="*"
          rate="1:1"
          toolBgc="none"
          :isModal="false"
          :showChooseBtn="true"
          :lockScroll="true"
          :boxWidth="573"
          :boxHeight="358"
          :cutWidth="250"
          :cutHeight="250"
          :sizeChange="true"
          :moveAble="true"
          :imgMove="true"
          :originalGraph="false"
          :smallToUpload="true"
          :saveCutPosition="true"
          :scaleAble="true"
          :previewMode="true"
          :quality="1"
          :accept="imgType"
          :toolBoxOverflow="true"
          :index="1"
          @cutDown="cutDown"
          @onPrintImg="cutterPrintImg"
      >
        <div class="btn btn-primary">选择图片</div>
      </ImgCutter>
      <div class="preview">
        <h4>预览图</h4>
        <div>
          <img :src="imgSrc" alt="预览图">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ImgCutter from 'vue-img-cutter';
import modifyAvatar from "@/api/modifyAvatar"; // 引入头像修改的API

export default {
  name: 'AvatarUpload',
  components: { ImgCutter },
  data() {
    return {
      imgType: "image/gif, image/jpeg ,image/png, image/jpg", // 支持的图片格式
      imgSrc: 'https://pic.ziyuan.wang/user/guest/2024/01/_d52ebb4674ccb.png', // 默认头像
    };
  },

  methods: {
    // 处理裁剪结果
    cutDown(cutResult) {
      if (cutResult && cutResult.dataURL) {
        this.imgSrc = cutResult.dataURL; // 更新预览图
        // 调用 API 上传头像
        modifyAvatar(cutResult.file)
            .then((res) => {
              console.log(res.data);
              this.$message({
                message: '上传成功',
                center: true,
                type: 'success',
                duration: 1500,
                offset: 80,
              });
              // 上传成功后刷新页面
              window.location.reload();
            })
            .catch((error) => {
              console.error('上传失败', error);
              this.$message.error('上传失败');
            });
      }
    },

    // 打印裁剪后的图片
    cutterPrintImg(obj) {
      this.imgSrc = obj.dataURL; // 更新预览图为裁剪后的图片
    },
  },

  created() {
    // 如果需要根据用户ID动态加载初始头像，可以在这里进行处理
    // 比如，调用API获取用户的头像路径并赋值给 imgSrc
  },
};
</script>

<style scoped>
.image-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;

  width: 90%;
}

.preview {
  margin-left: 20px;
  text-align: center;
  width: 300px;
  height: 300px;
}
</style>

